{% load static %}
<!DOCTYPE html>
<html lang="zxx">
<head>
    <title>TGA GAME</title>
    <!-- 采用模板语言，加载静态资源 -->
    {% load staticfiles %}
    <meta charset="UTF-8">
    <meta name="description" content="EndGam Gaming Magazine Template">
    <meta name="keywords" content="endGam,gGaming, magazine, html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Favicon -->
    <link href="{% static 'img/favicon.ico' %}" rel="shortcut icon"/>
    <!-- 其他 meta 标签和样式表 -->
    <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i" rel="stylesheet">


    <!-- Stylesheets -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/slicknav.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/animate.css' %}"/>

    <!-- Main Stylesheets -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}"/>


    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <!-- 引入monikai.css -->
    <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <!--导入css-->
    <link rel="stylesheet" href="{% static 'common/common.css' %}">
    <link rel="stylesheet" href="{% static 'common/jquery.pagination.css' %}">
    <!-- 引入vuejs -->
    <script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>


</head>
<body>
<div id="app">
    <!-- Page Preloder -->
    <div id="preloder">
        <div class="loader"></div>
    </div>

    <!-- Header section -->
    <header class="header-section">
        <div class="header-warp">
            <div class="header-bar-warp d-flex">
                <!-- site logo -->
                <div><img src="../static/img/logo.png" alt=""></div>
                <nav class="top-nav-area w-100">
                    <div class="user-panel">
                        <div class="navbar-collapse" style="background-color: #081624; color: white;">
                            <ul class="nav navbar-nav">
                                <!-- 如果用户已经登录，则显示用户名下拉框 -->
                                <li class="nav-item dropdown" v-if="is_login">
                                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                       @click="show_menu_click">[[ username ]]</a>
                                    <div style="background-color: #081624; color: white;">
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="display: block" v-show="show_menu" >
                                        <a class="dropdown-item" href='{% url 'users:center' %}' style=" background-color: #081624; color: white;">个人信息</a>
                                        <a class="dropdown-item" href='{% url 'users:logout' %}' style=" background-color: #081624; color: white;">退出登录</a>
                                    </div>
                                    </div>
                                </li>
                                <!-- 如果用户未登录，则显示登录按钮 -->
                                <li class="nav-item" v-else>
                                    <a class="nav-link" href="{% url 'users:login' %}">登录</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- Menu -->
                    <ul class="main-menu primary-menu">
                        <li><a href="{% url 'home:home' %}">首页</a></li>
                        <li><a href="{% static 'games.html' %}">游戏</a>
                            <ul class="sub-menu">
                                <li><a href="{% static 'game-single.html' %}">最佳游戏</a></li>
                            </ul>
                        </li>
                        <li><a href="{% static 'review.html' %}">评论</a></li>
                        <li><a href="{% static 'blog.html' %}">购买</a></li>
                        <li><a href="{% url 'users:center' %}">个人中心</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <!-- Header section end -->


	<!-- Hero section -->
	<section class="hero-section overflow-hidden">
		<div class="hero-slider owl-carousel">
			<div class="hero-item set-bg d-flex align-items-center justify-content-center text-center" data-setbg="{% static 'img/slider-bg-1.jpg' %}">
				<div class="container">
					<h1 style="color: aliceblue;">Game on!</h1>
					 <p>落叶捎来讯息，那伟大的艾尔登法环已经破碎。在雾的彼端，我们的故乡‘交界地’，如今陷入了混乱。<br>
                         你，将穿越迷雾，抵达交界地，觐见艾尔登法环成为艾尔登之王，重建破碎的世界。</p >
					<a href="https://sekiro.cubejoy.com/index.html" class="site-btn">了解更多  <img src="{% static 'img/icons/double-arrow.png' %}" alt="#" /></a>
				</div>
			</div>
		</div>
	</section>
	<!-- Hero section end-->


    <!-- Intro section -->
    <section class="intro-section">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="intro-text-box text-box text-white">
                        <div class="top-meta"><a href="{% static 'games.html' %}">游戏</a></div>
                        <h3>游戏推荐</h3>
                        <p>下列展示了一些热门游戏，如果想了解更多精品游戏，请点击了解更多，前往游戏推荐平台</p>
                        <a href="{% static 'games.html' %}" class="read-more">了解更多<img
                                src="{% static 'img/icons/double-arrow.png' %}" alt="#"/></a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="intro-text-box text-box text-white">
                        <div class="top-meta"><a href="{% static 'blog.html' %}">购买</a></div>
                        <h3>游戏购买</h3>
                        <p>如果您有下定决心要购买的游戏，请请点击了解更多，前往购买平台</p>
                        <a href="{% static 'blog.html' %}" class="read-more">了解更多<img
                                src="{% static 'img/icons/double-arrow.png' %}" alt="#"/></a>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="intro-text-box text-box text-white">
                        <div class="top-meta"><a href="{% static 'review.html' %}">评论</a></div>
                        <h3>游戏评价</h3>
                        <p>如果您想了解游戏评分和玩家评价，请请点击了解更多，前往评论平台</p>
                        <a href="{% static 'review.html' %}" class="read-more">了解更多<img
                                src="{% static 'img/icons/double-arrow.png' %}" alt="#"/></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Intro section end -->


    <!-- Blog section -->
    <section class="blog-section spad">
        <div class="container">
            <div class="row">
                <div class="col-xl-9 col-lg-8 col-md-7">
                    <div class="section-title text-white">
                        <h2>热门游戏</h2>
                    </div>
                    <ul class="blog-filter">
                        <li><a href="https://eldenring.bn-ent.net/sc/">艾尔登法环</a></li>
                        <li>
                            <a href="https://baike.baidu.com/item/%E5%8F%8C%E4%BA%BA%E6%88%90%E8%A1%8C/56093918">双人成行</a>
                        </li>
                        <li>
                            <a href="https://baike.baidu.com/item/%E5%8D%9A%E5%BE%B7%E4%B9%8B%E9%97%A83/24597126">博德之门3</a>
                        </li>
                    </ul>
                    <!-- Blog item -->
                    <div class="blog-item">
                        <div class="blog-thumb">
                            <img src="{% static 'img/blog/1.jpg' %}" alt="">
                        </div>
                        <div class="blog-text text-box text-white">
                            <div class="top-meta"><a href="https://eldenring.bn-ent.net/sc/">艾尔登法环</a></div>
                            <h3>2022TGA年度最佳</h3>
                            <p>落叶捎来讯息，那伟大的艾尔登法环已经破碎。在雾的彼端，我们的故乡‘交界地’，如今陷入了混乱。
                                永恒女王玛莉卡销声匿迹，在黑刀阴谋之夜，黄金葛德文最先失去性命。“玛莉卡之子，诸位半神，
                                为争夺艾尔登法环的碎片而陷入疯狂。他们因新得的力量而堕落，引发了碎片战争，无王存在的时代来临。
                                无上意志最终放逐了他们，世界陷入了更深的绝望。哦，褪色者啊，依旧无法永眠的死者，那失去的赐福正在呼唤你。
                                蛮荒地王者荷莱·露、光耀金面具、死眠少女菲雅……他们各自命运多舛。
                                但还有一人，那默默无名的褪色者，将被赐福再次眷顾。你，将穿越迷雾，抵达交界地，觐见艾尔登法环。
                                你的使命是成为艾尔登之王，重建破碎的世界。</p>
                            <a href="{% static 'games.html' %}" class="read-more">了解更多<img
                                    src="{% static 'img/icons/double-arrow.png' %}" alt="#"/></a>
                        </div>
                    </div>
                    <!-- Blog item -->
                    <div class="blog-item">
                        <div class="blog-thumb">
                            <img src="{% static 'img/blog/2.jpg' %}" alt="">
                        </div>
                        <div class="blog-text text-box text-white">
                            <div class="top-meta"><a
                                    href="https://baike.baidu.com/item/%E5%8F%8C%E4%BA%BA%E6%88%90%E8%A1%8C/56093918">双人成行</a>
                            </div>
                            <h3>2021TGA年度最佳</h3>
                            <p>对经常起争执、互看不顺眼的夫妻科迪与小梅，这两名人类被魔咒变成了玩偶，并且还受困于一个奇幻世界中。
                                在爱情导师哈金博士的指示下，科迪与小梅心不甘情不愿地试图拯救他们破碎的感情，
                                而各式各样欢乐而难缠的游戏挑战也将阻止他们恢复正常。</p>
                            <a href="{% static 'games.html' %}" class="read-more">了解更多<img
                                    src="{% static 'img/icons/double-arrow.png' %}" alt="#"/></a>
                        </div>
                    </div>
                    <!-- Blog item -->
                    <div class="blog-item">
                        <div class="blog-thumb">
                            <img src="{% static 'img/blog/3.jpg' %}" alt="">
                        </div>
                        <div class="blog-text text-box text-white">
                            <div class="top-meta"><a
                                    href="https://baike.baidu.com/item/%E5%8D%9A%E5%BE%B7%E4%B9%8B%E9%97%A83/24597126">博德之门3</a>
                            </div>
                            <h3>2023TGA年度最佳</h3>
                            <p>召集你的队伍，返回被遗忘的国度，开启一段充满友谊与背叛、牺牲与生存，以及至高无上力量诱惑的传奇故事。
                                神秘的力量正在你体内苏醒，而这一切都来源于夺心魔种在你大脑里的寄生虫。反抗吧，将黑暗的力量反掌为用。
                                你也可以选择接受这种腐化，变成终极的邪恶。故事将在D&D(龙与地下城)的世界中展开。</p>
                            <a href="{% static 'games.html' %}" class="read-more">了解更多<img
                                    src="{% static 'img/icons/double-arrow.png' %}" alt="#"/></a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-5 sidebar">
                    <div id="stickySidebar">
                        <div class="widget-item">
                            <h4 class="widget-title">更多年度游戏</h4>
                            <div class="trending-widget">
                                <div class="tw-item">
                                    <div class="tw-thumb">
                                        <img src="{% static 'img/blog-widget/1.jpg' %}" alt="#">
                                    </div>
                                    <div class="tw-text">
                                        <div class="tw-meta"><a
                                                href="https://baike.baidu.com/item/The%20Last%20of%20Us%20Part%20II/62953563">最后生还者2</a>
                                        </div>
                                        <h5>2020TGA年度最佳</h5>
                                    </div>
                                </div>
                                <div class="tw-item">
                                    <div class="tw-thumb">
                                        <img src="{% static 'img/blog-widget/2.jpg' %}" alt="#">
                                    </div>
                                    <div class="tw-text">
                                        <div class="tw-meta"><a
                                                href="https://sekiro.cubejoy.com/index.html">只狼：影逝二度</a></div>
                                        <h5>2019TGA年度最佳</h5>
                                    </div>
                                </div>
                                <div class="tw-item">
                                    <div class="tw-thumb">
                                        <img src="{% static 'img/blog-widget/3.jpg' %}" alt="#">
                                    </div>
                                    <div class="tw-text">
                                        <div class="tw-meta"><a
                                                href="https://baike.sogou.com/v32376258.htm?fromTitle=%E6%88%98%E7%A5%9E4">战神</a>
                                        </div>
                                        <h5>2018TGA年度最佳</h5>
                                    </div>
                                </div>
                                <div class="tw-item">
                                    <div class="tw-thumb">
                                        <img src="{% static 'img/blog-widget/4.jpg' %}" alt="#">
                                    </div>
                                    <div class="tw-text">
                                        <div class="tw-meta"><a
                                                href="https://www.nintendo.com.hk/switch/zelda_botw/index.html">塞尔达传说：旷野之息</a>
                                        </div>
                                        <h5>2017TGA年度最佳</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Blog section end -->


    <!-- Intro section -->
    <section class="intro-video-section set-bg d-flex align-items-end " data-setbg="{% static 'img/promo-bg.jpg' %}">
        <a href="https://www.bilibili.com/video/BV1jw411E7YG/?spm_id_from=333.337.search-card.all.click&vd_source=130801cbdca718c1db90105a5bac9f3b"
           class="video-play-btn video-popup"><img src="../static/img/icons/solid-right-arrow.png" alt="#"></a>
        <div class="container">
            <div class="video-text">
                <h2>Grand Theft Auto V</h2>
                <p>开放世界，多人在线模式，超大地图，内容丰富</p>
            </div>
        </div>
    </section>
    <!-- Intro section end -->


    <!-- Featured section -->
    <section class="featured-section">
        <div class="featured-bg set-bg" data-setbg="{% static 'img/featured-bg.jpg' %}"></div>
        <div class="featured-box">
            <div class="text-box">
                <div class="top-meta"><a href="https://www.bilibili.com/video/BV1tb4y1L7yA?t=0.3">Grand Theft Aoto 6</a>
                </div>
                <h3>2024TGA最受期待游戏</h3>
                <p>2024年12月13日，在年度游戏颁奖盛典TGA上，《GTA 6》成功斩获了最受期待游戏奖。
                    这一消息无疑点燃了无数玩家的热情，也进一步提升了对这一游戏的关注度。
                    作为备受瞩目的开放世界动作冒险游戏，《GTA 6》自其开发消息公布以来，就引发了社区和媒体的广泛讨论。
                    其故事背景设定在一个充满犯罪与阴谋的都市之中，玩家将扮演不同角色，经历一系列引人入胜的任务和挑战。
                    与往作相比，《GTA 6》的技术进步显而易见。游戏的图形引擎得到全面升级，画面表现将展现更加细腻的细节与真实感，
                    让玩家在探索这个虚拟世界时，仿佛置身于现实之中。此外，全新改进的人工智能NPC为角色互动增添了更多可能性，
                    NPC们的行为和反应将更加灵活，为玩家提供更具沉浸感的游戏体验。无论是在任务中与敌对势力的对抗，
                    还是与城市中居民的互动，玩家都将感受到更为紧张刺激的游戏氛围。</p>
                <a href="https://www.bilibili.com/video/BV1tb4y1L7yA?t=0.3" class="read-more">了解更多 <img
                        src="{% static 'img/icons/double-arrow.png' %}" alt="#"/></a>
            </div>
        </div>
    </section>
    <!-- Featured section end-->


    <!-- Footer section -->
    <footer class="footer-section">
        <div class="container">
            <div class="footer-left-pic">
                <img src="{% static 'img/footer-left-pic.png' %}" alt="">
            </div>
            <div class="footer-right-pic">
                <img src="{% static 'img/footer-right-pic.png' %}" alt="">
            </div>
            <img src="{% static 'img/logo.png' %}" alt="">
            <ul class="main-menu footer-menu">
                <li><a href="{% url 'home:home' %}">首页</a></li>
                <li><a href="{% static 'games.html' %}">游戏</a>
                <li><a href="{% static 'review.html' %}">评论</a></li>
                <li><a href="{% static 'blog.html' %}">购买</a></li>
            </ul>
        </div>
    </footer>
    <!-- Footer section end -->
</div>


<!--====== Javascripts & Jquery ======-->
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.slicknav.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/jquery.sticky-sidebar.min.js' %}"></script>
<script src="{% static 'js/jquery.magnific-popup.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<script type="text/javascript" src="{% static 'js/host.js' %}"></script>
<script type="text/javascript" src="{% static 'js/common.js' %}"></script>
<script type="text/javascript" src="{% static 'js/home.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.pagination.min.js' %}"></script>
</body>
</html>
